<template>
  <div id="map"></div>
</template>
<script setup lang="ts">
import { Scene, Marker } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { onMounted } from 'vue';
import * as G2 from '@antv/g2';
import markerData from '@/data/marker.json';
onMounted(() => {
  const scene = new Scene({
    id: 'map',
    map: new GaodeMap({
      style: 'light',
      center: [107.054293, 35.246265],
      zoom: 4.056,
      token: 'd151259baf8489c0bc6281aeeb455b98'
    }),
  });
  console.log(markerData);

  markerData.features.forEach(item => {
    console.log(111, item);

    const el = document.createElement('div');
    el.style.width = '200px';
    el.style.height = '150px';
    const chart = new G2.Chart({
      container: el,
      width: 200,
      height: 150,
    });

    chart
      .interval()
      .data(item.properties.data)
      .encode('x', 'month')
      .encode('y', 'sales')
       .style({
    stroke: 'black',
    strokeWidth: 2,
  })
  .viewStyle({
    // viewFill: 'red',
    contentFill: 'yellow',
  })
  chart.options({
  theme: { type: 'dark' },
});

    chart.render();
    const marker = new Marker({
      element: el,
    }).setLnglat({
      lng: item.geometry.coordinates[0],
      lat: item.geometry.coordinates[1],
    });
    scene.addMarker(marker);
  });
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
